<template>
  <div class="dashboard-editor-container" v-loading.fullscreen.lock="fullscreenLoading">
    <div style="width: 100%;">
      <el-row :gutter="10">
        <el-col  :xs="8" :sm="6" :md="4" :lg="3" >
          <el-button @click="getDataList"><i class="el-icon-refresh"/>
            {{$t('v520.refreshData')}}
          </el-button>
        </el-col>
        <el-col  :xs="8" :sm="6" :md="4" :lg="3" >
<!--          <el-button type="primary" @click="showCreate">-->
<!--            <i class="el-icon-plus"/>-->
<!--            {{$t('v520.createTask')}}-->
<!--          </el-button>-->
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="batch_uuid"
        label="批次编号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="file_name"
        label="批次文件名"
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="success"
        label="成功导入"
        width="120"
      >
        <template slot-scope="scope">
            <span style="font-size: 16px;color: #1e7e34;font-weight: 700;">
              {{scope.row.success}}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="not_me"
        label="无me数量"
        width="120"
      >
        <template slot-scope="scope">
            <span style="font-size: 16px;color: #bd2130;font-weight: 700;">
              {{scope.row.not_me}}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone_error"
        label="号码错误数量"
        width="120"
      >
        <template slot-scope="scope">
            <span style="font-size: 16px;color: #bd2130;font-weight: 700;">
              {{scope.row.phone_error}}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone_repeat"
        label="重复号码数量"
        width="120"
      >
        <template slot-scope="scope">
            <span style="font-size: 16px;color: #bd2130;font-weight: 700;">
              {{scope.row.phone_repeat}}
            </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createtime"
        :label="$t('v520.createTime')"
        width="160"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('v520.operate')"
        width="200"
      >
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查看任务详情" placement="top">
            <router-link :to="'/config/protocol_info/'+scope.row.id">
              <el-button type="primary" size="mini">
                <i class="wshub wshub-zirenwu"></i>
              </el-button>
            </router-link>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;text-align: right;padding-right: 20px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="20"
        :current-page.sync="queryList.page"
        :total="total"
        @current-change="getDataList()"
      >
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { getList} from '@/api/protocol'
// import {getAllTask} from '@/api/tg_collection'

export default {
  name: 'protocol',
  created() {
    // getAllTask().then(res => {
    //   if(res.code == 0){
    //     this.options = res.data;
    //   }else{
    //     this.$notify.error({title:'加载数据失败',message:'加载已完成的采集群成员任务数据失败,请刷新页面'});
    //   }
    // });
    this.getDataList();
  },
  data() {
    return {
      fullscreenLoading:false,
      total: 0,
      type:0,
      queryList: {
        limit: 20,
        page: 1
      },
      options:[],
      dialogVisible:false,
      links:'',
      sourceTask:null,
      content:'',
      tableData: []
    }
  },
  methods: {
    getDataList() {
      const loading = this.$loading({
        lock: true,
        text: this.$t('v520.getting'),
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getList(this.queryList).then(res => {
          loading.close()
        this.tableData = res.data.rows
        this.total = res.data.total
      }).catch(e => {
        loading.close()
        this.$message.error('请求失败')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #FFF;
  min-height: 100vh;
  padding: 40px 40px 0px;

  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }

  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;

    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
</style>
